<template>
    <div>
        <div id="tel_verify_bak" class="js_com_black js_hide_com com_black" style="display:none;" @click="closeVerify"></div>
        <div class="js_phoneVerify_alert comafter luo-phoneVerify-alert" style="display: none">
            <div class="luo-phoneVerify-alert-info">
                <p class="auction-alertLogin-top">为便于兑奖，请填写手机号</p>
                <img class="icon-closeBtn-phoneVerify" src="../../../assets/images/icon-closeBtn-phoneVerify.png" @click="cancel_phoneAlert" alt="close">
                <div class="groupCard-userName-alert-input">
                    <div class="js_comverify flex-row partner-input-groupR">
                        <div class="lqy-input-wrap flex-data" id="phone-num">
                            <input placeholder="输入手机号码"
                                   @keyup="phone_verify" @blur="phone_verify"
                                   aria-invalid="true"
                                   class="js_phone js_input"
                                   type="tel" v-model="phoneNum">
                        </div>
                        <div class="partner-closeBtn">
                            <img class="js_closeBtn img-responsive" src="../../../assets/images/partner_iconClose.png" alt="clearBtn" style="display: none" >
                        </div>
                    </div>
                    <div class="flex-row partner-input-groupR luo-phoneVerify-getCode" style="padding: 0">
                        <div class="js_comverify flex-row" style="border-radius: 5px;flex: 1;">
                            <div id="verify-code" class="flex-data lqy-input-wrap" >
                                <input id="verify"
                                       @keyup="verify_code01"
                                       aria-invalid="true"
                                       placeholder="输入验证码"
                                       @blur="verify_code01"
                                       class="js_input retail-register-phone-input retail-register-vertfy-input"
                                       type="tel" v-model="code">
                            </div>
                            <div class="partner-closeBtn">
                                <img class="js_closeBtn img-responsive" src="../../../assets/images/partner_iconClose.png" alt="" style="display: none">
                            </div>
                        </div>
                        <input type="button"
                               class="js_getVerify partner-input-verify-btn disabled"
                               @click="sendVerifyCode"
                               value="获取验证码"/>
                    </div>
                    <div class="procuer-get-code js_procuer_getCode procuer-get-code2" style="display: block">
                        <span class="procuer-not-have-code">收不到验证码?</span>
                        <span class="procuer-click-get-code">点击获取</span>
                        <span class="procuer-get-voice" id="procuer-get-voice" @click="sendVoiceCode">语音验证码</span>
                    </div>
                    <div class="procuer-get-code1 procuer-get-code3" style="display: none">
                        <span>电话快来了，请留意来自</span>
                        <span class="procuer-phone">021-XXXX</span>的电话
                    </div>
                    <input class="js_submit01 js_submit luo-partner-submitBtn disabled"  @click="verifyCode" type="button" value="确定">
                </div>
            </div>
        </div>
        <div id="error-msg" class="js_collect_alert text-center input-alert" style="display:none;">
            <span class="js_collect_text input-alert-text">请输入正确的手机号</span>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import xurl from '../../../x/xurl'
    import retail_cofirmBuying from '../../../../static/js/retailConfirmBuying'
    import loginVerify from '../../../../static/js/loginVerify'

    export default {
        data(){
            return{
                phoneNum:'',
                code:''
            }
        },
        props:{isThirdLogin:{type:Boolean}},
        methods:{
            closeVerify(){
                $("#tel_verify_bak").fadeOut("slow");
                $(".js_phoneVerify_alert").fadeOut("slow");
            },
            cancel_phoneAlert() {//关闭弹窗
                $('body').removeClass('body-position-fixed');
                $('.js_comBlack').hide();
                $('.js_hide_com').hide();
                $('.js_phoneVerify_alert').hide();
            },
            sendVoiceCode(){
                var url = this.NW_API_vue + "/voice/code/send/phone/" + this.phoneNum;//发送语音验证码
                xurl.put(url).then((response) => {
                    if (response.data.success) {
//                $('.procuer-get-code1 .procuer-get-code3').show(); //提示信息
                    } else {
                        var errorMsg = response.data.errMsg;
                        this.showErrorMsg(errorMsg);
                    }
                })
            },
            sendVerifyCode(){
                let event = '.js_getVerify'
                let url = this.NW_API_vue + "/forgetPwd/code/send/phone/" + this.phoneNum;//发送验证码
                xurl.put(url).then((response) => {
                    if(response.data.success){
                        loginVerify.time1(event);//计时器
                    }else{
                        let errorMsg = response.data.errMsg;
                        this.showErrorMsg(errorMsg);
                    }
                })
            },
            verifyCode(){
                let url = this.NW_API_vue + "/register/code/check/phone/" + this.phoneNum + "/" + this.code;
                xurl.put(url).then((response) => {
                    if (response.data.success) {
                        if(this.isThirdLogin){
                            //第三授权未绑定手机号码
                            let bindingPUrl = this.NW_API_vue +"/ajax/do/binding/phone?phone=" + this.phoneNum;
                            xurl.post(bindingPUrl).then((bindResponse) => {
                                if (bindResponse.data.success) {
                                    loginVerify.cancel_phoneAlert(); //关闭弹框
                                    location.reload();//刷新页面
                                }
                            });
                        }else{
                            //验证码注册登录
                            let loginCodeUrl = this.NW_API_vue +"/do/login/code?phone=" + this.phoneNum + "&code=" + this.code;
                            xurl.post(loginCodeUrl).then((loginResponse) =>{
                                if(data.success){
                                    //缓存当前用户信息
                                    this.$store.dispatch('initCurrentUser', data.result);
                                    loginVerify.cancel_phoneAlert(); //关闭弹框
                                    location.reload();//刷新页面
                                }
                            });
                        }
                    } else {
                        let errorMsg = response.data.errMsg;
                        this.showErrorMsg(errorMsg);
                    }
                })
            },
            showErrorMsg(errMsg){
                $("#error-msg span").text(errMsg);
                $("#error-msg").show();
                setTimeout(()=> {
                    $("#error-msg").hide();
                }, 1500);
            },
            phone_verify(){
                let obj = '.js_phone'
                loginVerify.phone_verify(obj)
            },
            verify_code01(){
                let obj = '#verify'
                loginVerify.verify_code01(obj)
            },
        }
    }
</script>

<style scoped>

</style>
